<template>
  <div id="circle">
    <van-nav-bar title="商品分类" fixed />

    <!-- 搜索框 -->
    <van-search placeholder="请输入搜索关键词" input-align="center" />

    <!-- 列表 -->
    <div class="list">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <a href="#tj">
            <van-sidebar-item title="推荐" />
          </a>
          <a href="#sar">
            <van-sidebar-item title="送爱人" />
          </a>
          <a href="#spy">
            <van-sidebar-item title="送朋友" />
          </a>
          <a href="#szb">
            <van-sidebar-item title="送长辈" />
          </a>
          <a href="#sls">
            <van-sidebar-item title="送老师" />
          </a>
          <a href="#skh">
            <van-sidebar-item title="送客户" />
          </a>
          <a href="#sbr">
            <van-sidebar-item title="送病人" />
          </a>
          <a href="#kyhl">
            <van-sidebar-item title="开业花篮" />
          </a>
          <a href="#hyzh">
            <van-sidebar-item title="会议桌花" />
          </a>
        </van-sidebar>
      </div>
      <div class="right">
        <div>
          <van-divider
            id="tj"
            :style="{
              color: '#f73a3a',
              borderColor: '#f73a3a',
              padding: '0 16px',
            }"
          >
            今日推荐
          </van-divider>
          <van-card
            v-for="a in jrtj"
            :key="a.id"
            :price="a.price"
            :desc="a.num"
            :title="a.desc"
            :thumb="a.img"
          />
        </div>

        <div>
          <van-divider
            id="sar"
            :style="{
              color: '#f73a3a',
              borderColor: '#f73a3a',
              padding: '0 16px',
            }"
          >
            送爱人
          </van-divider>
          <van-card
            v-for="b in labb"
            :key="b.id"
            :price="b.price"
            :desc="`销量：` + b.num"
            :title="b.title"
            :thumb="b.img"
          />
        </div>

        <div>
          <van-divider
            id="spy"
            :style="{
              color: '#f73a3a',
              borderColor: '#f73a3a',
              padding: '0 16px',
            }"
          >
            送朋友
          </van-divider>
          <van-card
            v-for="c in srzf"
            :key="c.id"
            :price="c.price"
            :desc="`销量：` + c.num"
            :title="c.title"
            :thumb="c.img"
          />
        </div>

        <div>
          <van-divider
            id="szb"
            :style="{
              color: '#f73a3a',
              borderColor: '#f73a3a',
              padding: '0 16px',
            }"
          >
            送长辈
          </van-divider>
          <van-card
            v-for="d in fmzb"
            :key="d.id"
            :price="d.price"
            :desc="`销量：` + d.num"
            :title="d.title"
            :thumb="d.img"
          />
        </div>

        <div>
          <van-divider
            id="sls"
            :style="{
              color: '#f73a3a',
              borderColor: '#f73a3a',
              padding: '0 16px',
            }"
          >
            送老师
          </van-divider>
          <van-card
            v-for="e in sls"
            :key="e.id"
            :price="e.price"
            :desc="`销量：` + e.num"
            :title="e.title"
            :thumb="e.img"
          />
        </div>

        <div>
          <van-divider
            id="skh"
            :style="{
              color: '#f73a3a',
              borderColor: '#f73a3a',
              padding: '0 16px',
            }"
          >
            送客户
          </van-divider>
          <van-card
            v-for="f in skh"
            :key="f.id"
            :price="f.price"
            :desc="`销量：` + f.num"
            :title="f.title"
            :thumb="f.img"
          />
        </div>

        <div>
          <van-divider
            id="sbr"
            :style="{
              color: '#f73a3a',
              borderColor: '#f73a3a',
              padding: '0 16px',
            }"
          >
            送病人
          </van-divider>
          <van-card
            v-for="g in sbr"
            :key="g.id"
            :price="g.price"
            :desc="`销量：` + g.num"
            :title="g.title"
            :thumb="g.img"
          />
        </div>

        <div>
          <van-divider
            id="kyhl"
            :style="{
              color: '#f73a3a',
              borderColor: '#f73a3a',
              padding: '0 16px',
            }"
          >
            开业花篮
          </van-divider>
          <van-card
            v-for="h in swly"
            :key="h.id"
            :price="h.price"
            :desc="`销量：` + h.num"
            :title="h.title"
            :thumb="h.img"
          />
        </div>

        <div>
          <van-divider
            id="hyzh"
            :style="{
              color: '#f73a3a',
              borderColor: '#f73a3a',
              padding: '0 16px',
            }"
          >
            会议桌花
          </van-divider>
          <van-card
            v-for="i in hyzh"
            :key="i.id"
            :price="i.price"
            :desc="`销量：` + i.num"
            :title="i.title"
            :thumb="i.img"
          />
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar
      v-model="active"
      fixed
      active-color="#f73a3a"
      inactive-color="#000"
    >
      <van-tabbar-item name="index" to="/index" icon="home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item name="circle" to="/circle" icon="apps-o"
        >分类</van-tabbar-item
      >
      <van-tabbar-item name="cart" to="/cart" icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item name="mine" to="/mine" icon="contact"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "circle",
      activeKey: 0,
      jrtj: [
        {
          title: "一心一意",
          desc: "11枝红玫瑰韩式花束",
          tag: "有花有你",
          price: "138.00",
          oprice: "199.00",
          img: "../../index/jinrituijian/1.png",
          num: "销量：369",
        },
        {
          title: "笑如花颜",
          desc: "3枝向日葵3枝香槟玫瑰混搭花束",
          tag: "热卖爆款",
          price: "179.00",
          oprice: "219.00",
          img: "../../index/jinrituijian/2.jpg",
          num: "销量：369",
        },
        {
          title: "知心祝福",
          desc: "16枝冰蓝玫瑰韩式花束",
          tag: "销量排行",
          price: "218.00",
          oprice: "269.00",
          img: "../../index/jinrituijian/3.png",
          num: "销量：369",
        },
        {
          title: "幸福快乐",
          desc: "香槟玫瑰粉玫瑰绣球韩式花束",
          tag: "经典爆款",
          price: "329.00",
          oprice: "399.00",
          img: "../../index/jinrituijian/4.jpg",
          num: "销量：369",
        },
        {
          title: "一心一意",
          desc: "11枝红玫瑰韩式花束",
          tag: "有花有你",
          price: "138.00",
          oprice: "199.00",
          img: "../../index/jinrituijian/1.png",
          num: "销量：369",
        },
        {
          title: "笑如花颜",
          desc: "3枝向日葵3枝香槟玫瑰混搭花束",
          tag: "热卖爆款",
          price: "179.00",
          oprice: "219.00",
          img: "../../index/jinrituijian/2.jpg",
          num: "销量：369",
        },
        {
          title: "知心祝福",
          desc: "16枝冰蓝玫瑰韩式花束",
          tag: "销量排行",
          price: "218.00",
          oprice: "269.00",
          img: "../../index/jinrituijian/3.png",
          num: "销量：369",
        },
        {
          title: "幸福快乐",
          desc: "香槟玫瑰粉玫瑰绣球韩式花束",
          tag: "经典爆款",
          price: "329.00",
          oprice: "399.00",
          img: "../../index/jinrituijian/4.jpg",
          num: "销量：369",
        },
      ],
      labb: [
        {
          img: "../../index/lianaibiaobai/1.jpg",
          title: "19枝红玫瑰韩式花束",
          price: "199.00",
          num: 248,
        },
        {
          img: "../../index/lianaibiaobai/2.jpg",
          title: "精选19朵红玫瑰花束",
          price: "229.00",
          num: 298,
        },
        {
          img: "../../index/lianaibiaobai/3.png",
          title: "21枝粉玫瑰配蓝色满天星花束",
          price: "299.00",
          num: 648,
        },
        {
          img: "../../index/lianaibiaobai/4.png",
          title: "19枝密西根碎冰蓝玫瑰韩式花束",
          price: "269.00",
          num: 1137,
        },
        {
          img: "../../index/lianaibiaobai/5.png",
          title: "19枝粉紫玫瑰混搭韩式花束",
          price: "239.00",
          num: 999,
        },
        {
          img: "../../index/lianaibiaobai/6.jpg",
          title: "9枝粉玫瑰+进口满天星花束",
          price: "219.00",
          num: 125,
        },
        {
          img: "../../index/lianaibiaobai/7.jpg",
          title: "99朵红玫瑰网纱小夜灯款",
          price: "689.00",
          num: 367,
        },
        {
          img: "../../index/lianaibiaobai/8.jpg",
          title: "33朵红玫瑰精美花束",
          price: "339.00",
          num: 428,
        },
      ],
      srzf: [
        {
          img: "../../index/shengrizhufu/1.jpg",
          title: "粉白玫瑰加绣球混搭花束",
          price: "289.00",
          num: 348,
        },
        {
          img: "../../index/shengrizhufu/2.jpg",

          title: "雪山白玫瑰绣球花束",
          price: "289.00",
          num: 298,
        },
        {
          img: "../../index/shengrizhufu/3.jpg",

          title: "26枝香槟玫瑰搭配桔梗花",
          price: "289.00",
          num: 648,
        },
        {
          img: "../../index/shengrizhufu/4.jpg",

          title: "33枝香槟玫瑰韩式花束",
          price: "329.00",
          num: 1137,
        },
        {
          img: "../../index/shengrizhufu/5.jpg",

          title: "7枝向日葵韩式花束",
          price: "219.00",
          num: 999,
        },
        {
          img: "../../index/shengrizhufu/6.png",

          title: "19枝紫玫瑰花束",
          price: "239.00",
          num: 125,
        },
        {
          img: "../../index/shengrizhufu/7.jpg",

          title: "19枝紫红玫瑰混搭花束",
          price: "229.00",
          num: 367,
        },
        {
          img: "../../index/shengrizhufu/8.jpg",

          title: "19枝香槟玫瑰花束",
          price: "259.00",
          num: 428,
        },
      ],
      fmzb: [
        {
          img: "../../index/fumuzhangbei/1.jpg",
          title: "15枝粉色康乃馨粉色满天星韩式花束",
          price: "198.00",
          num: 333,
        },
        {
          img: "../../index/fumuzhangbei/2.jpg",
          title: "粉玫瑰粉百合混搭花束",
          price: "198.00",
          num: 356,
        },
        {
          img: "../../index/fumuzhangbei/3.jpg",
          title: "11枝红色康乃馨韩式花束",
          price: "199.00",
          num: 33,
        },
        {
          img: "../../index/fumuzhangbei/4.png",
          title: "白百合红玫瑰红康乃馨韩式花束",
          price: "289.00",
          num: 138,
        },
        {
          img: "../../index/fumuzhangbei/5.jpg",
          title: "16枝康乃馨搭配白百合花束",
          price: "229.00",
          num: 1514,
        },
        {
          img: "../../index/fumuzhangbei/6.jpg",
          title: "红玫瑰搭配红色康乃馨花束",
          price: "198.00",
          num: 333,
        },
        {
          img: "../../index/fumuzhangbei/7.jpg",
          title: "红色康乃馨搭配红玫瑰花束",
          price: "249.00",
          num: 543,
        },
        {
          img: "../../index/fumuzhangbei/8.jpg",
          title: "16枝粉色康乃馨花束",
          price: "189.00",
          num: 533,
        },
      ],
      sls: [
        {
          img: "../../index/fumuzhangbei/2.jpg",
          title: "粉玫瑰粉百合混搭花束",
          price: "198.00",
          num: 356,
        },
        {
          img: "../../index/fumuzhangbei/7.jpg",
          title: "红色康乃馨搭配红玫瑰花束",
          price: "249.00",
          num: 543,
        },
        {
          img: "../../index/fumuzhangbei/1.jpg",
          title: "15枝粉色康乃馨粉色满天星韩式花束",
          price: "198.00",
          num: 333,
        },
        {
          img: "../../index/fumuzhangbei/4.png",
          title: "白百合红玫瑰红康乃馨韩式花束",
          price: "289.00",
          num: 138,
        },
        {
          img: "../../index/fumuzhangbei/5.jpg",
          title: "16枝康乃馨搭配白百合花束",
          price: "229.00",
          num: 1514,
        },
        {
          img: "../../index/fumuzhangbei/6.jpg",
          title: "红玫瑰搭配红色康乃馨花束",
          price: "198.00",
          num: 333,
        },
        {
          img: "../../index/fumuzhangbei/3.jpg",
          title: "11枝红色康乃馨韩式花束",
          price: "199.00",
          num: 33,
        },
      ],
      skh: [
        {
          img: "../../index/songkehu/1.jpg",
          title: "香槟玫瑰向日葵蓝绣球混搭花束",
          price: "289.00",
          num: 223,
        },
        {
          img: "../../index/songkehu/2.jpg",
          title: "向日葵粉玫瑰粉色康乃馨混搭花束",
          price: "269.00",
          num: 514,
        },
        {
          img: "../../index/songkehu/3.jpg",
          title: "玫瑰百合向日葵混搭花束",
          price: "329.00",
          num: 243,
        },
        {
          img: "../../index/songkehu/4.png",
          title: "3枝向日葵2枝香槟玫瑰花束",
          price: "159.00",
          num: 747,
        },
        {
          img: "../../index/songkehu/5.jpg",
          title: "11枝粉玫瑰搭配8朵粉百合花束",
          price: "289.00",
          num: 150,
        },
        {
          img: "../../index/songkehu/6.jpg",
          title: "百合+紫玫瑰+洋桔梗韩式混搭花束",
          price: "329.00",
          num: 412,
        },
        {
          img: "../../index/songkehu/7.jpg",
          title: "6枝向日葵 8枝绿桔梗混合大花束",
          price: "229.00",
          num: 1195,
        },
        {
          img: "../../index/songkehu/8.jpg",
          title: "向日葵5枝黄玫瑰9枝混合韩式花束（提前一天预订）",
          price: "239.00",
          num: 9561,
        },
      ],
      sbr: [
        {
          img: "../../index/fumuzhangbei/8.jpg",
          title: "16枝粉色康乃馨花束",
          price: "189.00",
          num: 533,
        },
        {
          img: "../../index/fumuzhangbei/2.jpg",
          title: "粉玫瑰粉百合混搭花束",
          price: "198.00",
          num: 356,
        },
        {
          img: "../../index/fumuzhangbei/7.jpg",
          title: "红色康乃馨搭配红玫瑰花束",
          price: "249.00",
          num: 543,
        },
        {
          img: "../../index/fumuzhangbei/1.jpg",
          title: "15枝粉色康乃馨粉色满天星韩式花束",
          price: "198.00",
          num: 333,
        },
        {
          img: "../../index/fumuzhangbei/4.png",
          title: "白百合红玫瑰红康乃馨韩式花束",
          price: "289.00",
          num: 138,
        },
        {
          img: "../../index/fumuzhangbei/5.jpg",
          title: "16枝康乃馨搭配白百合花束",
          price: "229.00",
          num: 1514,
        },
        {
          img: "../../index/fumuzhangbei/6.jpg",
          title: "红玫瑰搭配红色康乃馨花束",
          price: "198.00",
          num: 333,
        },
        {
          img: "../../index/fumuzhangbei/3.jpg",
          title: "11枝红色康乃馨韩式花束",
          price: "199.00",
          num: 33,
        },
      ],
      swly: [
        {
          img: "../../index/shangwuliyi/1.jpg",
          title: "大吉大利 一对开业花篮",
          price: "288.00",
          num: 43,
        },
        {
          img: "../../index/shangwuliyi/2.jpg",
          title: "红红火火 一对开业花篮",
          price: "489.00",
          num: 473,
        },
        {
          img: "../../index/shangwuliyi/3.jpg",
          title: "生意红火 一对花篮",
          price: "398.00",
          num: 425,
        },
        {
          img: "../../index/shangwuliyi/4.png",
          title: "大吉大利 粉白玫瑰气球开业花篮",
          price: "489.00",
          num: 143,
        },
        {
          img: "../../index/shangwuliyi/5.jpg",
          title: "开业大卖 一对开业花篮",
          price: "328.00",
          num: 653,
        },
        {
          img: "../../index/shangwuliyi/6.png",
          title: "一路红火 一对开业花篮",
          price: "388.00",
          num: 63,
        },
        {
          img: "../../index/shangwuliyi/7.jpg",
          title: "大展宏图 一对开业花篮",
          price: "328.00",
          num: 543,
        },
        {
          img: "../../index/shangwuliyi/8.jpg",
          title: "福气多多 一对开业花篮",
          price: "388.00",
          num: 343,
        },
      ],
      hyzh: [
        {
          img: "../../index/huiyizhuohua/1.jpg",
          title: "粉白百合红玫瑰会议桌花",
          price: "388.00",
          num: 1,
        },
        {
          img: "../../index/huiyizhuohua/2.jpg",
          title: "桌花 白百合搭配粉玫瑰系列桌花",
          price: "389.00",
          num: 73,
        },
        {
          img: "../../index/huiyizhuohua/3.jpg",
          title: "桌花 春意盎然",
          price: "529.00",
          num: 128,
        },
        {
          img: "../../index/huiyizhuohua/4.jpg",
          title: "商务桌花 一路红火",
          price: "329.00",
          num: 129,
        },
        {
          img: "../../index/huiyizhuohua/5.jpg",
          title: "桌花 恭喜发财",
          price: "429.00",
          num: 136,
        },
        {
          img: "../../index/huiyizhuohua/6.jpg",
          title: "桌花 讲台会议庆典花束",
          price: "369.00",
          num: 184,
        },
        {
          img: "../../index/huiyizhuohua/7.jpg",
          title: "桌花粉百合搭配白玫瑰会议桌花",
          price: "428.00",
          num: 166,
        },
        {
          img: "../../index/huiyizhuohua/8.jpg",
          title: "桌花 出类拔萃",
          price: "429.00",
          num: 159,
        },
      ],
    };
  },
};
</script>

<style lang="scss">
#circle {
  .van-nav-bar {
    background-color: #f73a3a;
    .van-nav-bar__title {
      color: #fff;
    }
  }
  .van-search {
    position: fixed;
    top: 46px;
    left: 0;
    width: 100%;
  }
  .list {
    display: flex;
    justify-content: space-between;
    .left {
      margin-top: 100px;
      position: absolute;
      overflow-y: auto;
      overflow-x: hidden;
      width: 100px;
      height: calc(100% - 150px);
      .van-sidebar {
        width: 100px;
      }
    }
    .right {
      flex: 1;
      margin-top: 100px;
      position: absolute;
      left: 100px;
      width: calc(100% - 100px);
      overflow-y: auto;
      overflow-x: hidden;
      height: calc(100% - 150px);
      .van-divider:nth-child(1) {
        margin-top: 0;
      }
      .van-card__title {
        white-space: nowrap; //禁止换行
        overflow: hidden;
        text-overflow: ellipsis; //...
      }
      .van-card__price {
        color: #f73a3a;
      }
    }
  }
}
</style>
